

.orderdetail-popup-modal {
    display: flex;
    align-items: center;
    justify-content: center; 
    .ant-modal {
        top: 0;
    }

     #detail-main>.state-main>#detail-right>div{
            height: 473px!important; 
    }
    
    
    
    #detail-main{
        height: 555px;
        width: 100%;
        background: #EEEEEE;
        padding: 16px 20px;
        .detail-left{   
            width: 420px; 
            height: 100%;   
            display: inline-block;
            vertical-align: top; 
            margin-right: 20px;
            .detail-left-one{
                width: 100%;
                height: 192px;
                background: #FFFFFF;
                border: 1px solid #CACACA;
                border-radius: 4px;
                margin-bottom: 16px; 
                padding: 16px 14px;
                .each-datil{
                    width: 100%; 
                    display: flex; 
                    margin-bottom: 2px;
                    .hide{
                        display: none;
                    }
                    p{
                        line-height: 24px; 
                        span{
                            color: #9B9B9B; 
                            display: inline-block;  
                            text-align: justify;
                            text-justify: distribute-all-lines; 
                            text-align-last: justify; 
                            display: inline-block;
                            font-size: 15px;
                        } 
                        em{
                            font-style: normal;  
                            color: #1A1A1A; 
                            font-size: 13px;
                        }
                        
                    }
                    p:nth-child(1){
                        flex: 6; 
                        span{
                            width: 80px;
                        }
                       
                    }
                     p:nth-child(2){
                        flex: 4;
                         span{
                            width: 65px;
                        }
                    }
                }
                .each-remark{
                    width: 100%;
                    height: 38px;  
                    display: flex; 
                    margin-bottom: 12px;
                    span{
                        flex: 2;
                        color: #9B9B9B;  
                        width: 80px;
                        display: inline-block;  
                        text-align: justify;
                        text-justify: distribute-all-lines; 
                        text-align-last: justify; 
                        display: inline-block; 
                         font-size: 15px;
                    } 
                    em{
                        flex: 8; 
                        font-style: normal;  
                        color: #1A1A1A; 
                        font-size: 14px; 
                        width: 312px;
                        word-wrap: break-word;
                    }

                }

            }
          
            .detail-left-three{
                width: 100%;
                height: 152px;
                background: #FFFFFF;
                border: 1px solid #CACACA;
                border-radius: 4px; 
                p{
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    background: #F5F5F5;
                    border-radius: 3px 3px 0 0; 
                    font-size: 14px;
                    color: #9B9B9B; 
                    margin-bottom: 16px; 
                }
                span{
                   
                    font-size: 14px;
                    color: #383838; 
                    padding-left: 154px;
                    display: block;
                }
            }
        }
        #detail-right{
            width: 420px;
            height: 524px; 
            background-color: #FFFFFF;
            display: inline-block;
            vertical-align: top;
            background: #FFFFFF;
            border: 1px solid #CACACA;
            border-radius: 4px;
             p{
                height: 30px;
                line-height: 30px;
                text-align: center;
                background: #F5F5F5;
                border-radius: 3px 3px 0 0; 
                font-size: 14px;
                color: #9B9B9B; 
                // margin-bottom: 16px; 
            }
            .my-scroll .all-pagination div:first-child{
                border-left: 0;
            }
            .detail-right-main{
                padding-top:6px;
                width: 100%;  
                height: 100%;
                .detail-right-data{
                    width: 100%;
                    margin-bottom: 10px;
                }
                .many-table-info{
                    display: flex;
                    .table-num{
                        background: #82669C;
                        border-radius: 100px;
                        height: 20px; 
                        font-size: 14px;
                        color: #FFFFFF;
                        text-align: center;
                        margin-right: 16px;
                        padding: 0 5px
                    }
                    .order-num{
                        font-size: 14px;
                        color: #666666;
                    }
                }
                .order-list{
                    width: 400px;
                    border: 1px solid #cacaca;
                    border-radius: 4px;
                    padding: 6px 16px;
                    margin-top: 6px;
                    span{
                        font-size: 14px;
                        color: #383838;
                        display: inline-block;
                    }
                    .num{ padding-right: 20px;}
                    .name{ width: 150px;}
                    .count{width: 80px;}
                    .remark{
                        width: 95%;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                        margin-left: 27px;
                    }
                    .return{
                        width: 20px;
                        height: 20px;
                        background:  #6C6C6C;
                        color: #fff;
                        font-size: 14px;
                        border-radius: 50%;
                        text-align: center;line-height: 20px;
                        margin-right: 9px;
                    }
                    .gift{
                        width: 20px;
                        height: 20px;
                        background: #55B1A6;
                        color: #fff;
                        font-size: 14px;
                        border-radius: 50%;
                        text-align: center;line-height: 20px;
                        margin-right: 20px;
                    }
                }
                .return-list{
                    span{
                        font-size: 12px;
                        color: #9B9B9B;
                    }
                }
            }

        }
    }
    
}


